<template>
  <div class="venus-list-page">
    <!--费用支付查询界面-->
    <div class="page-search">
      <el-row type="flex" justify="space-between" class="page-list-head">
        <div class="title">费用支付查询</div>
      </el-row>
      <el-row type="flex" class="search-list">
        <el-row type="flex" class="list-items">
          <div class="venus-input-box">
            <label>查询日期</label>
            <el-date-picker
              v-model="table.feePay_table.end_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入日期"
              value-format="yyyyMMdd"
              @change="reset"
            />
          </div>
          <div class="venus-input-box">
            <label>产品组合</label>
            <el-select
              v-model="table.feePay_table.port_code"
              placeholder="请选择"
              filterable
              @change="portfol_change_fnc"
            >
              <el-option
                v-for="item in dict.t8_port_info_id"
                :key="item.value"
                :label="item.value + '-' + item.text"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="venus-input-box">
            <label>理财产品</label>
            <el-select v-model="table.feePay_table.prod_name" placeholder="请选择">
              <el-option
                v-for="item in dict.prod_code"
                :key="item.value"
                :label="item.value + '-' + item.text"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-row>
        <!--      </el-row>-->
        <!--      <el-row type="flex" justify="end">-->

      </el-row>
      <el-row type="flex" class="list-items" justify="space-content">
        <div class="venus-btn-box">
          <el-button type="primary" @click="search">查询</el-button>
        </div>
        <div class="venus-btn-box">
          <el-button type="primary" @click="reset">重置</el-button>
        </div>
      </el-row>
    </div>
    <!--    查询列表返显-->
    <div class="page-list">
      <table-pagination
        :table-data="table.feePay_table.tableData"
        :table-header-config="table.tableHeaderConfig"
        highlight-current-row
        :total="table.feePay_table.total"
        :page-size="table.feePay_table.pageSize"
        :now-page="table.feePay_table.nowPage"
        @current-change="currentChange"
        @table-current-change="feePay_get_search"
      />
    </div>
    <div class="page-list">

      <el-row type="flex" class="list-items" justify="space-content">
        <div class="venus-input-box">
          <label>付费日期范围</label>
          <el-date-picker
            v-model="table.feePay002_table.start_date"
            type="date"
            class="venus-input-middle venus-input-date"
            placeholder="请输入起始日期"
          /> -
          <el-date-picker
            v-model="table.feePay002_table.end_date"
            type="date"
            class="venus-input-middle venus-input-date"
            placeholder="请输入截止日期"
          />
        </div>
        <div class="venus-btn-box">
          <el-button type="primary" @click="search">查询</el-button>
        </div>
      </el-row>
      <table-pagination
        :table-data="table.feePay002_table.tableData"
        :table-header-config="table.feePayTableHeaderConfig"
        highlight-current-row
        :total="table.feePay002_table.total"
        :page-size="table.feePay002_table.pageSize"
        :now-page="table.feePay002_table.nowPage"
        :operation-config="table.feePay002_table.operationConfig"
        :dict-data="dict"
        @current-change="currentChange"
      />
    </div>
  </div>
</template>

<script>
  import * as kk from '../../../../utils/k-utils'
  import request from '../../../../utils/request'

  export default {
    name: 'FeePay',
    data() { // 数据定义
      return {
        SYSTEM_TIME: '20200221',
        dict: {
          is_confirm: {},
          t8_port_info_id: [], // 产品组合
          prod_code: [] // 产品名称
        },
        table: {
          tableHeaderConfig: [ // 表头配置
            { prop: 'order', label: '序号' },
            { prop: 'port_name', label: '投组名称' },
            { prop: 'prod_name', label: '产品名称' },
            { prop: 'establish_date', label: '产品成立日' },
            { prop: 'end_date', label: '产品清盘日' },
            { prop: 'actual_scale', label: '产品实际规模(元)' },
            { prop: 'expe_rate', label: '预期收益率(%)' }
          ],
          feePayTableHeaderConfig: [ // 表头配置
            { prop: 'settle_date', label: '付费日期' },
            { prop: 'ftool_code', label: '资产负债代码' },
            { prop: 'ftool_name', label: '资产负债名称' },
            { prop: 'is_confirm', label: '是否已确认' }
          ],
          feePay_table: {
            limit: 5, // 分页配置
            total: 0, // 数据总条数
            nowPage: 1, // 当前页
            tableData: [], // 表格数据
            exeid: 'M8findProduct', // exeid
            // 以下是查询参数
            port_code: '',
            prod_code: '',
            end_date: this.SYSTEM_TIME
          },
          feePay002_table: {
            limit: 5, // 分页配置
            total: 0, // 数据总条数
            nowPage: 1, // 当前页
            tableData: [], // 表格数据
            exeid: 'M8findProductDetail', // exeid
            // 以下是查询参数
            ftool_code: '',
            start_date: '',
            end_date: '',
            operationConfig: { // 表格操作配置
              fixed: 'left',
              width: 200,
              operationButton: [
                // value:操作文字； func:回调函数
                { value: '费用支付调整确认', func: this.M8FeePayProdSP001 },
                { value: '详情', func: this.M8FeePayProdSP001L }
              ]
            }
          }
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      init: function() {
        kk.k_load_dict(this, 'is_confirm', '1yes0no')
        this.load_dict_exeid(this, 'public', 'selectPortfol', 't8_port_info_id')
        this.load_dict_exeid(this, 'public', 'selectProd_query_terms', 'prod_code')
        this.table.feePay_table.nowPage = 1
        kk.k_load_table(this, 'feePay_table', 'fee')
      },
      search() { // 查询函数
        this.table.feePay_table.nowPage = 1
        kk.k_load_table(this, 'feePay_table', 'fee')
      },
      feePay_get_search(params) { // 关联表查询
        this.table.feePay002_table.prod_code = params.prod_code
        this.table.feePay002_table.nowPage = 1
        kk.k_load_table(this, 'feePay002_table', 'fee')
      },
      search002() { // 查询函数
        this.table.feePay_table.nowPage = 1
        kk.k_load_table(this, 'feePay002_table', 'fee')
      },
      reset() { // 重置函数
        this.table.feePay_table.prod_code = ''
        this.table.feePay_table.port_code = ''
      },
      // 下一页触发的事件
      currentChange(index) {
        this.table.feePay_table.nowPage = index
        kk.k_load_table(this, 'feePay_table', 'fee')
      },
      M8FeePayProdSP001(params) { // 费用支付调整确认函数
        this.$router.push({ path: '/', query: params })
      },
      M8FeePayProdSP001L(params) { // 详情函数
        this.$router.push({ path: '/', query: params })
      },
      /* 通过exeid加载字典 */
      load_dict_exeid(this_object, service_name, exeid, dict) {
        request({
          loading: true,
          url: service_name + '/base/comn-query.json?exeid=' + exeid,
          method: 'post'
        }).then(rep => {
          this_object['dict'][dict] = rep.rows
        })
      }

    }
  }
</script>

<style scoped>
</style>
